<template>
	<view class="register_page">
		<view class="uni-center">
			<image class="logo-image" src="../../../static/icon/logo.png" mode="aspectFill" :draggable="false" />
		</view>
		<view class="input_box"><input type="text" v-model="userName" placeholder="账号" /></view>
		<view class="input_box"><input type="text" v-model="password" password placeholder="密码"/></view>
		<view class="btn_box"><button @click="onSubmit">登录</button></view>
	</view>
</template>

<script>
let clear;
import { mapState, mapMutations,mapGetters } from 'vuex';
import base from '@/config/baseUrl';
export default {
	data() {
		return {
			userName: '',
			password: '',
		};
	},
	computed: {
		...mapGetters({
			userInfo: 'userInfo',
			hasLogin: 'hasLogin'
		})
	},
	//第一次加载
	onLoad(e) {
		this.userName = this.userInfo.userName
		this.password = this.userInfo.displayPassword
		if (this.hasLogin) {
			uni.switchTab({
			    url: '/pages/home/home'
			});
		}
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		...mapMutations(['setUserInfo']),
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		onSubmit() {
			if (!this.userName) {
				uni.showToast({
					title: '请输入账号',
					icon: 'none'
				});
				return;
			}
			if (!this.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return;
			}
			this.$http.post('/login?username='+this.userName+'&password='+this.password).then(res => {
				console.log("登录成功",res)
				uni.showToast({
					title: '登录成功',
					duration: 1000
				})
				res.user = {}
				res.user.token = res.token
				res.user.displayPassword = this.password
				this.setUserInfo(res.user)
				this.$http.get("/user/info").then(per => {
					setTimeout(() => {
						uni.switchTab({
						    url: '/pages/home/home'
						});
					}, 500);
					this.setUserInfo({"permissions":per.permissions})
				})
				this.$http.get('/system/user/profile').then(res => {
					res.data.avatar = base.baseUrl+"/"+res.data.avatar;
					this.setUserInfo(res.data);
				});
			}, err => {
				uni.showToast({
					title: '账号密码错误',
					icon: 'error',
					duration: 1000
				})
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
	
	.uni-center{
		display: flex;
		justify-content: center;
		align-items: center; 
	}
	
	.logo-image{
		width: 200rpx;
		height: 200rpx;
	}
	 
.register_page {
	padding: calc(var(--status-bar-height) + 70upx) 50upx 50upx 50upx;
	background-color: #fff;
	min-height: 100vh;
	.title {
		margin-bottom: 50upx;
		display: flex;
		align-items: center;
		text {
			font-size: 36upx;
			color: #999;
			&.active {
				font-size: 48upx;
				color: #333333;
				font-weight: bold;
			}
			&:nth-child(2){
				margin-left: 70upx;
			}
		}
	}
	.input_box {
		display: flex;
		align-items: center;
		border-bottom: 2upx solid #e5e5e5;
		padding: 30upx 0;
		margin-top: 20upx;
		input {
			flex: 1;
			font-size: 32upx;
			color: #333;
			height: 60upx;
		}
		button {
			height: 60upx;
			background-color: #f7f7f7;
			font-size: 24upx;
			border-radius: 8upx;
			padding: 0 14upx;
			color: #333;
			line-height: 60upx;
			margin-left: 20upx;
			&.active {
				@include theme('btn_bg');
				color: #fff;
			}
		}
	}
	.btn_box {
		margin-top: 60upx;
		button {
			@include theme('btn_bg');
			color: #fff;
			height: 92upx;
			line-height: 92upx;
			display: flex;
			justify-content: center;
			border-radius: 25px;
			font-size: 32rpx;
		}
	}
	.agreement {
		font-size: 24upx;
		color: #999999;
		> text {
			color: $themeColor;
		}
	}
	.password_register {
		margin-top: 110upx;
		text-align: center;
		text {
			font-size: 24upx;
			color: #333333;
			text-decoration: underline;
		}
	}
	.nav_box {
		margin-top: 30upx;
		display: flex;
		justify-content: space-between;
		> text {
			font-size: 24upx;
			color: #333333;
			&.color {
				color: $themeColor;
			}
		}
	}
}
.station {
	height: 230upx;
}
.third_party_login_box {
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	height: 230upx;
	padding: 0 30upx;
	.third_party_title {
		display: flex;
		align-items: center;
		&:before,
		&:after {
			content: '';
			flex: 1;
			height: 2upx;
			background-color: #f5f5f5;
		}
		text {
			font-size: 24upx;
			color: #999999;
			flex-shrink: 0;
			padding: 0 20upx;
		}
	}
	.third_party_content {
		height: 200upx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 60upx;
			height: 52upx;
		}
	}
}
</style>
